<template>
  <div class="echarts-wrapper">
    <div class="echarts-box">
      <div class="bg-img"><img src="@/assets/images/transparent-bg.png" alt="" /></div>
      <div class="circle-bg"><img src="@/assets/images/circle-bg.png" alt="" /></div>
      <div ref="gaugeChart" id="myEcharts" :style="{ width, height }"></div>
      <div class="cicle">
        <SvgIcon :iconName="unit === 'temp' ? 'temp' : 'water'" size="23px" />
        <div class="unit">{{ unit === 'temp' ? '°C' : '%' }}</div>
        <div class="text">{{ unit === 'temp' ? '温度' : '湿度' }}</div>
      </div>
      <div class="axis-num">
        <div>{{ unit === 'temp' ? '16°C' : '0%' }}</div>
        <div>{{ unit === 'temp' ? '31°C' : '99%' }}</div>
      </div>
    </div>
    <div class="echarts-actions">
      <div class="minus" @click="handleMinus"><SvgIcon iconName="minus" size="13px" /></div>
      <div class="plus" @click="handlePlus"><SvgIcon iconName="plus" size="13px" /></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { nextTick } from 'vue'
import { ref, onMounted, watch } from 'vue'

const gaugeChart = ref<any>(null)
// vue 组件中，调用多个 echarts 图表组件，只会加载第一个的 bug 解决方法：
// 用 ref 来保存，不要用 document 获取 echart id
const chart = ref<any>(null)
const width = ref('39.8vw')
const height = ref('39.8vw')
const echartVal = ref(31)

const emit = defineEmits(['emitChartVal'])
const props = defineProps({
  unit: {
    type: String
  },
  val: {
    type: Number
  }
})

const maxVal = props.unit === 'temp' ? ref(31) : ref(99)
const minVal = props.unit === 'temp' ? ref(16) : ref(0)

onMounted(() => {
  console.log('mount')
  initChart()
})
watch(
  () => props.val,
  newVal => {
    if (newVal) echartVal.value = newVal
    nextTick(() => {
      initChart()
    })
  },
  { immediate: true, deep: true }
)

// 调用多个 echarts 图表组件，会随着窗口的变化而变化
window.addEventListener('resize', () => {
  chart.value.resize()
})
const handleMinus = () => {
  if (minVal.value >= echartVal.value) return
  echartVal.value--
  // initChart()
  emit('emitChartVal', echartVal.value)
}
const handlePlus = () => {
  if (maxVal.value <= echartVal.value) return
  echartVal.value++
  // initChart()
  emit('emitChartVal', echartVal.value)
}
console.log(props)
const initChart = () => {
  chart.value = echarts.init(gaugeChart.value)
  let option = {
    series: [
      {
        type: 'gauge',
        center: ['50%', '50%'],
        startAngle: 225,
        endAngle: -45,
        min: minVal.value,
        max: maxVal.value,
        splitNumber: 15, // 仪表盘刻度的分割段数
        itemStyle: {
          // 指针颜色
          color: '#FFAB91'
        },

        // 展示当前进度
        progress: {
          show: true,
          // 进度条宽度
          width: 3,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: '#41A1FF'
              },
              {
                offset: 1,
                color: '#3EFFCA'
              }
            ])
          }
        },
        pointer: {
          // 是否显示指针
          show: false
        },
        axisLine: {
          lineStyle: {
            // 轴线宽度
            width: 2
          }
        },
        // 刻度样式
        axisTick: {
          // 刻度线与轴线的距离
          distance: -16,
          length: 8,
          splitNumber: 2,
          lineStyle: {
            width: 2,
            color: '#fff'
          }
        },
        // 分隔线样式
        splitLine: {
          // 分隔线与轴线的距离
          distance: -16,
          // 分隔线线长。支持相对半径的百分比
          length: 0,
          lineStyle: {
            width: 2,
            color: '#999'
          }
        },
        // 刻度标签
        axisLabel: {
          show: false
        },
        anchor: {
          // 表盘中指针的固定点
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          width: '30%',
          offsetCenter: [0, '0'],
          fontSize: 27,
          fontWeight: 'bold',
          // formatter: '{value}°C',
          color: '#2a335b'
        },
        data: [
          {
            value: echartVal.value
          }
        ]
      }
    ]
  }

  chart.value.setOption(option)
  window.onresize = chart.value.resize
}
</script>
<style lang="less" scoped>
@import url(../../assets/style/ac.less);
</style>
